
import ScrollToTop from './components/ScrollToTop/index'; // 导入 ScrollToTop组件
import styles from './styles.module.scss'
import { useState, useEffect } from "react";
// 导入 Route, Routes 组件
// 导航栏
import Nav from "./components/Nav";
import { useNavigate } from 'react-router-dom';
import type { PopconfirmProps } from 'antd';
import { Button, Popconfirm, message } from "antd";
import { reqNav } from "./api/Banner";
import { NavListType } from "./api/Banner/type";
import { MessageFilled, TwitchFilled, WechatFilled, WeiboCircleFilled, LikeOutlined, AndroidOutlined, SmileOutlined } from "@ant-design/icons";
import QRCode from './assets/qrcode.jpg'
import { UserOutlined } from '@ant-design/icons';

import cookie from 'react-cookies'
import { Outlet } from 'react-router-dom';

function App() {
    const [NavList, setNavList] = useState<NavListType[]>([])
    const navigate = useNavigate()
    // 获取Nav
    const getNav = () => {
        reqNav().then((res) => {
            setNavList(res.result)

        })
    }


    const confirm: PopconfirmProps['onConfirm'] = () => {
        cookie.remove('userInfo');
        message.success('退出登录成功！');
        window.location.reload(); // 刷新页面  

    };



    useEffect(() => {
        getNav()

        return () => {

        }


    }, [])
    return (
        <div className={styles.app}>
            {/* 页面跳转滚动到顶部*/}
            <ScrollToTop />
            {/* 页头 */}
            <header>
                <ul>
                    {!cookie.load('userInfo') && <li onClick={() => {
                        navigate('/login', {
                            replace: false
                        })
                    }}>请先登录</li>}
                    {cookie.load('userInfo') && <li> <UserOutlined />{cookie.load('userInfo').account}</li>}
                    <li>我的订单</li>
                    <li onClick={() => {
                        navigate('/user', {
                            replace: false
                        })
                    }}>会员中心</li>

                    {cookie.load('userInfo') && <Popconfirm
                        title="退出登录"
                        description="确定要退出登录吗?"
                        onConfirm={confirm}

                        okText="确定"
                        cancelText="取消"
                    >
                        <li>退出登录</li>
                    </Popconfirm>}
                </ul>
            </header>
            {/* 导航栏 */}
            <Nav NavList={NavList} />
            <Outlet />
            {/* 页脚 */}
            <footer>
                <div className={styles.info}>
                    <div>
                        <span>客户服务</span>
                        <div>
                            <MessageFilled style={{ fontSize: 40, color: 'gray' }} />
                            <span>在线客服</span>
                        </div>
                        <div>
                            <TwitchFilled style={{ fontSize: 40, color: 'gray' }} />
                            <span>问题反馈</span>
                        </div>
                    </div>
                    <div>
                        <span>关注我们</span>
                        <div>
                            <WechatFilled style={{ fontSize: 40, color: 'gray' }} />
                            <span>公众号</span>
                        </div>
                        <div>
                            <WeiboCircleFilled style={{ fontSize: 40, color: 'gray' }} />
                            <span>微博</span>
                        </div>
                    </div>
                    <div className={styles.qrcodeBox}>
                        <span>下载APP</span>
                        <div>
                            <img src={QRCode} alt="" />
                        </div>
                        <div>
                            <span>扫码二维码</span>
                            <span>立马下载APP</span>
                            <Button type="primary" style={{ backgroundColor: '#27ba9b' }}>下载页面</Button>
                        </div>
                    </div>
                    <div className={styles.serviceHotline}>
                        <span>服务热线</span>
                        <div>
                            <span>400-0000-000</span>
                            <span>周一至周日 8:00-18:00</span>
                        </div>
                    </div>
                </div>
                <div className={styles.copyRight}>

                    <div className={styles.top}>
                        <div>
                            <LikeOutlined style={{ fontSize: 45 }} />
                            <span>价格亲民</span>
                        </div>
                        <div>
                            <AndroidOutlined style={{ fontSize: 45 }} />
                            <span>物流快捷</span>
                        </div>
                        <div>
                            <SmileOutlined style={{ fontSize: 45 }} />
                            <span>品质新鲜</span>
                        </div>
                    </div>
                    <div className={styles.bottom}>
                        <div>
                            <span>关于我们</span>
                            <span>帮助中心</span>
                            <span>售后服务</span>
                            <span>配送与验收</span>
                            <span>商务合作</span>
                            <span>搜索推荐</span>
                            <span>友情链接</span>
                        </div>
                        <div>
                            <span>CopyRight@LPYTR</span>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    )
}

export default App
